<template>
    <div>
        <div class="box">

            <div class="content">
                <div v-for="(item,index) in FriendList" @click="GotoUser(item)"  :key="index">
                    <div class="tit" :style="`${IsdarkMode ?'box-shadow: none;border: 1px solid #454546;':'border: 1px solid #cccbcb;'}`">
                        <div style="display: flex;position: relative;width: 100%;">
                            <img class="top_tx" :src="item.userimgurl" alt="">
                            <!-- <div style="width: 9px;height: 9px;border-radius: 50%;background-color: #65e351;position: absolute;right: 129px;z-index: 9;"></div> -->
                        <div style="margin-left: 9px;">
                            <h5 style="height: 27px;;font-size: 16px;margin: 0;display: flex;align-items: center;font-weight: 800;"
                            class="tit_one">
                            {{ item.username }}</h5>
                        <div style="flex-grow: 1;;font-size: 14px;padding-top: 2px;padding-bottom: 3px;box-sizing: border-box;"
                            class="tit_two">
                           地区:{{ item.provice }}</div>
                        </div>
                        </div>
  

                        <div class="bottom_go"
                            style="display: flex;align-items: center; width: 100%;height:32px;">
                            <svg t="1683882076046" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="11485" width="200" height="200">
                                <path
                                    d="M48.614141 512.514586C48.614141 256.995556 256.478384 49.131313 512.003879 49.131313c255.51903 0 463.38198 207.864242 463.38198 463.383273 0 255.525495-207.864242 463.388444-463.38198 463.388444C256.478384 975.904323 48.614141 768.040081 48.614141 512.514586L48.614141 512.514586zM909.191758 512.514586c0-219.015758-178.173414-397.186586-397.186586-397.186586-219.020929 0-397.193051 178.172121-397.193051 397.186586 0 219.019636 178.172121 397.191758 397.193051 397.191758C731.018343 909.707636 909.191758 731.535515 909.191758 512.514586L909.191758 512.514586zM567.474424 701.247354l165.761293-163.939556c9.797818-9.667232 12.249212-23.964444 7.378747-35.979636-0.297374-0.757657-1.025293-1.353697-1.387313-2.085495-1.521778-3.075879-3.176727-6.156929-5.72897-8.737616-0.028444-0.029737-0.065939-0.029737-0.094384-0.065939-0.036202-0.029737-0.036202-0.067232-0.067232-0.100848L568.962586 325.510465c-12.907313-12.944808-33.857939-12.974545-46.796283-0.071111-6.491798 6.454303-9.733172 14.964364-9.733172 23.434343 0 8.442828 3.206465 16.914101 9.662061 23.368404l106.843798 107.177374L313.407354 479.419475c-18.302707 0-33.101576 14.828606-33.101576 33.096404 0 18.27297 14.797576 33.101576 33.101576 33.101576l317.287434 0-109.756768 108.56598c-6.556444 6.454303-9.830141 14.995394-9.830141 23.53002 0 8.409212 3.176727 16.818424 9.566384 23.272727C533.513051 713.990465 554.467556 714.121051 567.474424 701.247354L567.474424 701.247354zM567.474424 701.247354"
                                    fill="#515151" p-id="11486"></path>
                            </svg>
                            <span style="font-size: 14px;">个人主页</span>
                            
                        </div>
                    </div>


                   
                </div>

                <i style="width: 200px;margin: 8px;"></i>
                <i style="width: 200px;margin: 8px;"></i>
                <i style="width: 200px;margin: 8px;"></i>
                
                 

            </div>


            <!-- <div  style="display: flex;width: 100%;flex-wrap: wrap;">

                <div v-for="item in 4" style="width: 190px;height: 40px;background-color: aqua;margin: 9px;"></div>
            </div> -->


        </div>
    </div>
</template>

<script>

 
export default {
    props: [
    "IsdarkMode"
  ],
    data() {
        return {
            FriendList: []
        }
    },
    created() {

        window.addEventListener("onmessageWS", this.getsocketData); //监听webscoket消息
    },
    mounted() {
        this.SendList()
    },
    methods: {
        SendList() {

            var sendobj = {
                msgType: 99,
            };

            this.MyWebSockeSend(sendobj); //发送消息
        },
        async getsocketData(e) {

            let thisuuid = localStorage.getItem("cacheLoginuuid")
            var objmsg = JSON.parse(e.detail.data);
            if(objmsg.msgType == 99)
            {
                // objmsg.Data.forEach(r=>{
                //     r.useruame = r.useruame == localStorage.getItem('cacheLoginUserName') ?'我':r.userName
                // })
                this.FriendList = objmsg.Data.filter(r=>r.useruuid != thisuuid)

                
                //console.log('this.FriendList',this.FriendList);
            }
        },
        NewChat(item)
        { 
            this.$emit('child-NewChat', item);
            
        }, 
        GotoUser(item) { 
            let tabobj = 
            {
                 IsShowJournalBox:false,
                 IsShowFriend:true,
                 IsAbout:false,
                 IsSetItemShou:false,
                 IsShowMy:false
            }

            this.$emit("journal-GotoUser", item,tabobj);
        },
        SelectRole(item) //选择角色模式
        {
            this.$emit('child-newmsg', item);
        },
        GoConmmon() //普通模式
        {
            this.$emit('child-newmsg', null);
        },
        ShowAIWords() {
            this.$emit('child-showAI', 111);
        },
        Copy(tit) {
            //提示

            this.$emit('child-Tips', 111);


            const data = tit.trim();
            //const data = 'Hello, world!'
            this.$copyText(data).then(function () {
                console.log('Copied:', data)
            }, function () {
                console.error('Copy failed:', data)
            })
        }
    }
}
</script>

<style scoped>
.box {
    background-color: #fffeff;
    height: 100%;
    position: relative;
    /* display: flex;
	height: 540px;
	flex-direction: column;
	z-index: 9999999;
	padding: 10px;
	border-radius: 6px;
	box-shadow: 0 0 10px 1px #888888;
	background-image: url('/bjmin.png');
	background-size: contain;
	background-repeat: no-repeat;
	position: relative;
	overflow: hidden; */
}



.top {
    display: flex;
    justify-content: space-between;
 
    font-size: 15px;
    font-weight: 600;
}

.top_right:hover {
    cursor: pointer;
}

.top_right svg {
    width: 22px;
    height: 22px;
    font-weight: 700;
    margin-right: 2px;
}

.content {
    width: 100%;
    height: 100%;
    overflow: auto;
    display: flex; 
    /* justify-content: space-between; */
    justify-content: space-around;
    flex-wrap: wrap;
    padding: 0 30px;
    padding-top: 20px;
    overflow: auto;
    box-sizing: border-box;
    position: relative;
}

.content::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 2px;
    /*滚动条整体宽度*/
    /*height: 1100px;*/
    /*scrollbar-arrow-color:red;*/
}

.content::-webkit-scrollbar-thumb {
    /*滚动条里面的小方块*/
    border-radius: 10px;
    /*-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);*/
    background-color: #c3c4c6;
    /*滚动条颜色*/
}

.content::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    /*-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);*/
    /*border-radius: 5px;*/
    /*滚动条背景颜色*/
}

.content {
    scrollbar-width: none;
}

.danger {
    background-image: linear-gradient(to bottom, #ff0000, #ffff00);
}

.tit {
    width: 200px;
    height: 100px;
    border: 1px solid #cccbcb;
    margin: 0 auto;
    border-radius: 8px;
    background-color: #fff;
    text-align: center;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    font-size: 13px;
    font-family: monospace;
    padding: 10px;
    padding-bottom: 0;
    margin-top: 31px;
    box-shadow: 0 0 9px 3px #cdd2e8;
    transition: transform .2s;
    font-family: 'KaiTi';
    padding-top: 5px;
    box-sizing: border-box;
    margin: 8px;
    margin-bottom: 16px;
}

.bottom_go{
     margin-top: 5px;
}

.bottom_go svg {
    margin-right: 5px;
    width: 15px;
    height: 15px;
    
}

.tit:hover {
    cursor: pointer;
    transform: scale(1.1)
}

.top_tx {
    border: 1px solid #cccbcb;
    z-index: 9;
    background-color: #fff;
    width: 45px;
    height: 45px;
    padding: 2px; 
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.copy-btn {
    cursor: pointer;
    font-size: 8px;
    position: absolute;
    top: 5px;
    right: 5px;
    /* 		border: 1px solid #676767;
		border-radius: 5px; */
    color: #676767;
    font-family: monospace;
}

.tit_two {
    text-align: left;

}


</style>